<!DOCTYPE html>
<html lang="en" data-ng-app="carmensdApp">
<head>
	<meta charset="ISO-8859-1">
	<title>Carmen Sandiego</title>
	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<script	src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script src="js/angular.js"></script>	
	<link rel="stylesheet" href="css/styles.css">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
</head>

<body data-ng-controller="CarmenSandiegoAppModel">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-xs-offset-1 left-panel shadow">
				<div class="country-banner">
					<div class="country-name text-center">
						<h1>{{paisActual.nombre}}</h1>
					</div>
					<img src="images/ciudad_.png">
				</div>
				<div class="tab-content info">
					<div class="tab-pane avion">
						<img src="images/avion.gif" width="200">
					</div>
					<div class="tab-pane active inicio">
							<img src="images/carmen.jpg">
					</div>
					<div class="tab-pane" id="{{lugar.nombreTipoLugar}}" data-ng-repeat="lugar in paisActual.lugares">
						<h3>Visitando: {{lugar.nombreTipoLugar}}</h3>
						<ul class="pistas">
							<li data-ng-repeat="pista in lugar.ocupante.pistas">
								{{pista.nombreTipoInfo}} - {{pista.dato}}
							</li>
						</ul>
						<div class="col-xs-12" data-ng-show="(villanoResponsable.nombre==villanoPerseguido.nombre) && (lugar.tieneVillano)">
							<div class="thumbnail col-xs-6 leyenda-fin">
								<div class="caption">
									<h4>Felicidades! GANASTE!!!</h4>
									<p>{{villanoResponsable.nombre}} esta en la carcel de Devoto pudriendose tras las rejas!<p>
								</div>
							</div>
							<div class="thumbnail col-xs-5 col-xs-offset-1 imagen-fin" >
								<img src="images/{{villanoResponsable.sexo}}_jail.png">
							</div>
						</div>
						<div class="col-xs-12" data-ng-show="villanoResponsable.nombre!=villanoPerseguido.nombre && 
														lugar.tieneVillano && 
														ordenEmitida">
							<div class="thumbnail col-xs-6 leyenda-fin">
								<div class="caption">
									<h4>PERDISTE!!!</h4>
									<p>La orden de arresto no concordaba con el villano responsable.. <br> 
									{{villanoResponsable.nombre}} esta en las exoticas playas de las Toninas disfrutando su fortuna!<p>
								</div>
							</div>
							<div class="thumbnail col-xs-5 col-xs-offset-1 imagen-fin">
								<img src="images/{{villanoResponsable.sexo}}_beach.png">
							</div>
						</div>
						<div class="col-xs-12" data-ng-show="!ordenEmitida && lugar.tieneVillano">
							<div class="thumbnail col-xs-6 leyenda-fin">
								<div class="caption">
									<h4>DORMISTE!!!</h4>
									<p>Sin orden de arresto, todos los villanos se fueron libres!<p>
								</div>
							</div>
							<div class="thumbnail col-xs-5 col-xs-offset-1 imagen-fin">
								<img src="images/dormiste.jpg">
							</div>
						</div>
					</div>
				</div>
				<ul id="menu" class="nav nav-pills nav-justified">
					<li data-ng-repeat="lugar in paisActual.lugares">
						<a href="#{{lugar.nombreTipoLugar}}" data-toggle="tab"> <img
							src="images/{{lugar.img}}.png" height="100" width="100"> <br>
							{{lugar.nombreTipoLugar}}
						</a>
					</li>
				</ul>
			</div>
			<div class="col-xs-4 right-panel shadow">
				<div class="text-center">
					<h3>Expedientes</h3>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5>Villanos</h5>
						<div class="list-group small infoVillanos">
							<a href="#" class="list-group-item"
								data-ng-repeat="villano in villanos"
								data-ng-click="$parent.villanoSeleccionado=villano"
								data-ng-class="{active:villanoSeleccionado==villano}">
								{{villano.nombre}} 
							</a>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="text-center">
						<h5> - {{villanoSeleccionado.nombre}} - </h5>
						<div  class="identidad" style="position:relative; height: 136px;">
							<div class="buscado" data-ng-show="villanoPerseguido!=null">
								<a title="Existe una orden de arresto contra {{villanoPerseguido.nombre}}!"> 
									<img src="images/buscado.png" width="30"> 
								</a>
							</div>
							<img class="fotoCarnet" src="images/{{villanoSeleccionado.sexo}}.png">
						</div>
						<button type="button" class="btn btn-default btn-block" 
							data-ng-disabled="villanoSeleccionado==null || ordenEmitida"
							data-ng-click="emitirOrden()">
							<span class="glyphicon glyphicon-list-alt pull-left"></span> Emitir Orden
						</button>
					</div>
				</div>
				<div class="col-xs-12">
					<h5>Señas Particulares</h5>
					<ul class="list-group small infoExpediente">
						<li class="list-group-item" data-ng-repeat="rasgo in villanoSeleccionado.rasgos">
							{{rasgo.dato}}
							<span class="glyphicon glyphicon-pushpin pull-right"></span>
					   	</li>
					</ul>
				</div>
				<div class="col-xs-12">
					<h5>Hobbies</h5>
					<ul class="list-group small infoExpediente">
						<li class="list-group-item" data-ng-repeat="hobbie in villanoSeleccionado.hobbies">
							{{hobbie.dato}}
							<span class="glyphicon glyphicon-pushpin pull-right"></span>
							<!-- villanoSeleccionado.tieneHobbie(hobbie) -->
					   	</li>
					</ul>
				</div>
				<div>
					<div class="col-xs-12">
						<div class="text-center">
							<h3>Aeropuerto</h3>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="text-center">
							<h5>Paises</h5>
						</div>
					</div>
					<div class="col-xs-12">
						<div class="col-xs-6">
							<div class="list-group small infoPaises">
								<a href="#" class="list-group-item"
									data-ng-repeat="nombrePais in paisActual.nombresConexiones"
									data-ng-click="$parent.nombrePaisSeleccionado=nombrePais;actualizarPaisSeleccionado()"
									data-ng-class="{active:nombrePaisSeleccionado==nombrePais}">
									{{nombrePais}} 
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-md-offset-6>">
							<div class="text-center">
								<button type="button" class="btn btn-default btn-block botonViaje" 
										data-ng-click="retroceder()" 
										data-ng-disabled="paisAnterior==null">
									<span class="glyphicon glyphicon-globe pull-left"></span> Retroceder
								</button>
								<button type="button" class="btn btn-default btn-block botonViaje" 
										data-ng-click="actualizarPaisSeleccionado();viajar()" 
										data-ng-disabled="nombrePaisSeleccionado==null">
									<span class="glyphicon glyphicon-plane pull-left"></span> Viajar
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Audio -->
			<audio preload="auto">
				<source src="fx/plane_sound.mp3" type="audio/mp3">
			</audio>
			
			<!-- JS -->
			<script src="js/app.js"></script>
			<script src="js/controllers.js"></script>
			<script src="js/ninguno.js"></script>
			<script type="text/javascript">
				
				$(document).ready(function(){
					$('.botonViaje').click(function() {
						$('audio')[0].play();
						$('.avion').show();
					    $('.avion').delay(3000).fadeOut("slow");
					    $('.inicio').addClass('active');
					});
				});
								
			</script>
		</div>
	</div>
</body>

</html>